import 'package:extended_image/extended_image.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_application_1/components/sticky/sticky_header_delegate.dart';
import 'package:flutter_application_1/components/zoom_sliver_bar/zoom_sliver_bar.dart';
import 'package:flutter_application_1/utils/source_utils.dart';

class CustomListPage extends StatefulWidget {
  @override
  _CustomListPageState createState() => _CustomListPageState();
}

class _CustomListPageState extends State<CustomListPage>
    with TickerProviderStateMixin {
  // 标题
  Widget _titleBuilder(String title) {
    final BorderSide thinBorder = BorderSide(
      width: 2,
      color: Theme.of(context).primaryColor,
    );

    final BorderSide boldBorder = BorderSide(
      width: 6,
      color: Theme.of(context).primaryColor,
    );

    return Container(
      height: 40,
      margin: EdgeInsets.symmetric(horizontal: 8),
      padding: EdgeInsets.only(left: 6),
      alignment: Alignment.centerLeft,
      decoration: BoxDecoration(
        color: Colors.white,
        border: Border(
          top: thinBorder,
          right: thinBorder,
          bottom: thinBorder,
          left: boldBorder,
        ),
      ),
      child: Text(title),
    );
  }

  // 触发刷新
  Future _onRefresh() async {
    await Future.delayed(Duration(milliseconds: 1500));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ZoomSliverBarController(
        child: CustomScrollView(
          // physics: BouncingScrollPhysics(),
          slivers: [
            // 导航栏
            ZoomSliverBar(
              title: ZoomSliverBarRefresh(
                refresh: Text('刷新中'),
                child: Text('普通列表'),
              ),
              actions: [
                IconButton(icon: Icon(Icons.add), onPressed: () {}),
                ZoomSliverBarRefresh(
                  child: IconButton(
                      icon: Icon(Icons.more_horiz), onPressed: () {}),
                ),
              ],
              centerTitle: true,
              pinned: true,
              expandedHeight: 230,
              flexibleSpace: FlexibleSpaceBar(
                background: ExtendedImage.asset(
                  ImageUtils.wrapAssets('bg-1.jpg'),
                  fit: BoxFit.cover,
                ),
              ),
              onRefresh: _onRefresh,
            ),

            SliverToBoxAdapter(child: SizedBox(height: 8)),
            // 网格列表
            SliverToBoxAdapter(
              child: _titleBuilder('网格列表'),
            ),
            SliverPadding(
              padding: EdgeInsets.all(8),
              sliver: SliverGrid(
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  // 2 列
                  crossAxisCount: 2,
                  // 横间隔
                  mainAxisSpacing: 5,
                  // 纵间隔
                  crossAxisSpacing: 8,
                  // 网格宽高比
                  childAspectRatio: 5.0,
                ),
                delegate: SliverChildBuilderDelegate(
                  (BuildContext context, int index) {
                    return Container(
                      alignment: Alignment.center,
                      color: Colors.cyan[100 * (index % 9)],
                      child: Text('item $index'),
                    );
                  },
                  childCount: 18,
                ),
              ),
            ),
            // 高度一样的列表
            SliverPersistentHeader(
              pinned: true,
              delegate: StickyHeaderDelegate(
                minHeight: 40,
                maxHeight: 40,
                child: _titleBuilder('高度一样的列表(这个标题是粘性的)'),
              ),
            ),
            SliverPadding(
              padding: EdgeInsets.all(8),
              sliver: SliverFixedExtentList(
                itemExtent: 50,
                delegate: SliverChildBuilderDelegate(
                  (BuildContext context, int index) {
                    return Container(
                      alignment: Alignment.center,
                      color: Colors.cyan[100 * (index % 9)],
                      child: Text('item $index'),
                    );
                  },
                  childCount: 9,
                ),
              ),
            ),
            // 高度不一样的列表
            SliverToBoxAdapter(
              child: _titleBuilder('高度不一样的列表'),
            ),
            SliverPadding(
              padding: EdgeInsets.all(8),
              sliver: SliverList(
                delegate: SliverChildBuilderDelegate(
                  (BuildContext context, int index) {
                    return Container(
                      height: double.parse('${50 + 5 * index}'),
                      alignment: Alignment.center,
                      color: Colors.cyan[100 * (index % 9)],
                      child: Text('item $index'),
                    );
                  },
                  childCount: 9,
                ),
              ),
            ),
            // 充满视口剩余空间
            // SliverFillRemaining(
            //   hasScrollBody: false,
            //   fillOverscroll: true,
            //   child: Container(
            //     color: Colors.blue[100],
            //   ),
            // ),
          ],
        ),
      ),
    );
  }
}
